<template>
  <div>
    <van-nav-bar title="新增项目" left-arrow @click-left="onClickLeft"/>
    <van-cell-group>
      <van-field v-model="assetsName" label="项目名称" autofocus placeholder="请输入项目名称"/>
      <div class="van-cell van-field">
        <div class="van-cell__title van-field__label">
          <span>分类</span>
        </div>
        <div class="van-cell__value" @click="showSheet = true">
          <div class="van-field__body">
              <div class="van-field__control" style="text-align: left;">{{level1Obj.label}}</div>
              <div class="van-field__right-icon"><i class="van-icon van-icon-arrow-down"></i></div>
          </div>
        </div>
      </div>
      <van-field v-model="address" label="地址" autofocus placeholder="请输入地址"/>
      <div class="button-wrap">
        <van-button style="margin-right:10px;" type="primary" @click="save">保存</van-button>
        <van-button @click="onClickLeft">返回</van-button>
      </div>
    </van-cell-group>
    <van-action-sheet
      v-model="showSheet"
      :actions="actions"
      @select="onSelect"
    />
  </div>
</template>
<script>
import vanNavBar from "vant/lib/nav-bar";
import "vant/lib/nav-bar/style";
import vanCellGroup from "vant/lib/cell-group";
import "vant/lib/cell-group/style";
import vanField from "vant/lib/field";
import "vant/lib/field/style";
import vanActionSheet from "vant/lib/actionsheet";
import "vant/lib/actionsheet/style";
import vanButton from "vant/lib/button";
import "vant/lib/button/style";

import { getLevel1List, getTaskList, addTaskList } from "@/utils/storage.js";
export default {
  components: {
    vanNavBar,
    vanCellGroup,
    vanField,
    vanActionSheet,
    vanButton
  },
  created() {
    this.level1List = getLevel1List();
    this.actions = this.level1List.map((t) => {
      return {
        ...t,
        name: t.label
      };
    });
    this.tasklist = getTaskList();
  },
  computed: {
    level1Obj() {
      return this.level1List[this.level1Index];
    }
  },
  data() {
    return {
      assetsName: "",
      level1List: [],
      level1Index: 0,
      showSheet: false,
      actions: [],
      address: '',
      tasklist: [],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSelect(obj) {
      this.showSheet = false;
      for (let i = 0; i < this.level1List.length; i++) {
        if (this.level1List[i].val === obj.val) {
          this.level1Index = i;
          return;
        }
      }
    },
    save() {
        if (!this.assetsName.trim()) {
        this.$toast('项目名称不能为空');
        return;
      }
      if (this.tasklist.some(t => t.assetsName.trim() === this.assetsName.trim())) {
        this.$toast('不能添加重复的项目');
        return;
      }
      if (!this.address.trim()) {
        this.$toast('地址不能为空');
        return;
      }
      addTaskList({
          assetsName: this.assetsName.trim(),
          level1: this.level1Obj.label,
          address: this.address.trim(),
      });
      this.onClickLeft();
    }
  }
};
</script>
<style lang="less" scoped>
  .button-wrap{
    text-align: center;
    padding: 10px 0;
    .van-button{
      width: 40%;
      border-radius: 10px;
    }
  }
</style>

